import ECharts from "@/components/ECharts/index.vue";
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "LiPieChart",
  props: {
    title: {
      type: String as PropType<string>,
      default: ""
    },
    data: {
      type: Array as PropType<
        {
          value: number;
          name: string;
          money: number;
        }[]
      >,
      required: true
    },
    height: {
      type: Number as PropType<number>,
      default: 480
    }
  },
  setup(props) {
    return () => (
      <>
        <ECharts
          option={{
            color: [
              "#1890FF",
              "#91CB74",
              "#FAC858",
              "#EE6666",
              "#73C0DE",
              "#3CA272",
              "#FC8452",
              "#9A60B4",
              "#ea7ccc",
              "#913B74",
              "#FA3858",
              "#7330DE",
              "#3C3272",
              "#9A30B4",
              "#ea3ccc"
            ],
            label: {
              formatter: "{b}: {d}%" // 标签的显示格式
            },
            title: { text: props.title, left: "center" },
            tooltip: { trigger: "item" },
            legend: { orient: "vertical", left: "left" },
            series: [
              { name: "", type: "pie", radius: "70%", data: props.data.map(item => ({ name: item.name, value: item.money })) }
            ]
          }}
          height={props.height}
        />
      </>
    );
  }
});
